<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>get1</button>
<button>get2-服务端渲染</button>
<button>get3-跨域</button>
<button>post</button>
<hr/>
<div id="app"></div>
</body>
<script>
    // 请求方式，
    // 请求地址
    // 发送参数
    // 获取响应体。
    const btns = document.querySelectorAll("button");
    const app = document.querySelector("#app");
    btns[0].onclick = function () {
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("get", "/xhr");
        xhr.send();
        xhr.onload = function () {
            app.innerHTML = xhr.response.scoreList.map(item=>(`
                <div>
                    <p>用户名：${item.userName}</p>
                    <p>年龄：${item.age}</p>
                    <p>性别：${item.sex}</p>
                    <p>成绩：${JSON.stringify(item.score)}</p>
                    <hr/>
                </div>
            `)).join("")
            // console.log(xhr.response);
        }
    }
    btns[1].onclick = function(){
        const xhr = new XMLHttpRequest();
        xhr.open("get","/xhr2");
        xhr.send();
        xhr.onload = function(){
            app.innerHTML = xhr.response;
        }
    }
    btns[2].onclick = function(){
        const xhr = new XMLHttpRequest();
        xhr.open("get","/api/xhr");
        xhr.send();
        xhr.onload = function(){
            console.log(xhr.response);
        }
    }

    btns[3].onclick = function(){
        const xhr = new XMLHttpRequest();
        xhr.open("post","/xhr?id=1");
        // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // xhr.send("a=1&b=2&c=3");

        xhr.setRequestHeader("Content-Type","application/json");
        xhr.send(JSON.stringify({
            a:1,
            b:2,
            c:3
        }));

        xhr.onload = function(){
            console.log(xhr.response);
        }
    }
</script>
</html>